<template>
	<div class="module-header">
		<div style="width:88%" class="xianheader" v-if="propsData.params.gridNum==3">
			<div class="xian" :style="[xianCss]" v-if=" propsData.params.newData==1&&propsData.params.useTitle==1">|
			</div>
			<div v-if="propsData.params.useTitle == 1" class="module-name" :style="[moduleNameCss]">{{ moduleName }}
			</div>
			<div style="margin-left:10rpx" :style="[propsData.params.css]" v-if="propsData.params.useTitle1 == 1">
				{{ propsData.params.nextText }}
			</div>
		</div>
		<div style="width:88%" class="xianheader" v-if="propsData.params.gridNum!=3">
			<div class="xian" :style="[xianCss]" v-if=" propsData.params.newData==1&&propsData.params.gridNum!=2">|
			</div>
			<div v-if="propsData.params.useTitle == 1" class="module-name1" :style="[moduleNameCss]">{{ moduleName }}
			</div>
		</div>

		<p class="more" :style="[moduleMoreCss]" v-if="propsData.params.line==1 " @click="goLink">
			<span>{{ moreText }}</span>
			<u-icon name="arrow-right" style="margin-top: 2rpx;"  size="24"></u-icon>
		</p>
		<div class="item-hover">
			<div class="edit-box" @click.stop="toModuleHeaderControl">
				<i class="iconfont icon-mokuai-bianji"></i>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		props: {
			moduleName: {
				type: String,
				default: "",
			},
			moreText: {
				type: String,
				default: "更多",
			},
			propsData: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {};
		},
		mounted() {},
		watch: {},
		computed: {
			moduleNameCss() {
				return this.propsData.params.moduleNameCss || "";
			},
			moduleMoreCss() {
				return this.propsData.params.moduleMoreCss || "";
			},
			xianCss() {
				return this.propsData.params.xian || "";
			}
		},
		methods: {
			goLink() {
				uni.navigateTo({
					url: this.propsData.params.link.link
				})
			},
			toModuleHeaderControl() {
				let data = Object.assign({}, this.propsData);
				data.controlComName = "editModuleHeader";
				this.$emit("editModuleHeader", data);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.xian {
		font-size: 34rpx;
		margin-right: 4rpx;
		margin-bottom: 4rpx;
	}

	.xianheader {
		display: flex;
		align-items: center;
		justify-content: start;

	}

	.module-header {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;

		.module-name1 {
			font-size: 32rpx;
			font-weight: 600;
			color: #262626;
			margin-bottom: 0;
			flex-grow: 1;
		}
	}


	.module-header {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;

		.module-name {
			font-size: 32rpx;
			font-weight: 600;
			color: #262626;
			margin-bottom: 0;
		}

		.more {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #888888;
			margin-bottom: 0;
			line-height: 1;
			 width: 80rpx;
			flex-wrap: nowrap;

			.iconfont {
				font-size: 24rpx;
				margin-left: 4rpx;
				transform: scale(0.8);
			}
		}

		.item-hover {
			width: 100%;
			height: 100%;
			border: 2rpx solid #1890fc;
			position: absolute;
			left: 0;
			top: 0;
			display: none;

			.edit-box {
				width:40rpx;
				height: 40rpx;
				background: #1890fc;
				border-radius: 0px 0px 0px 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				position: absolute;
				right: 0;
				top: 0;

				.iconfont {
					font-size: 36rpx;
					color: #ffffff;
				}
			}
		}
	}

	.module-header:hover>.item-hover {
		display: block;
	}
</style>